<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link href="../../test.css" rel="stylesheet" type="text/css">
  <link href="../../images/GvaScript.css" rel="stylesheet" type="text/css">
  <script src="../../../lib/prototype.js"></script>
  <script src="../../../lib/GvaScript.js"></script>
  <style>
      #menu { 
        display: none;
        position: absolute;
        border: 1px solid blue;
        background-color: white;
        padding: 4px;
      }

      /* icons on the right for dropdown menus */
      .TN_node .TN_label {
         background-image: url(special_icons/navopen.gif);
         background-repeat: no-repeat;
         background-position: center right;
         padding-right: 20px;
      }

      .TN_closed .TN_label {
         background-image: url(special_icons/navclose.gif);
      }

      .TN_leaf .TN_label {
         background-image: none;
      }
    </style>
    <script>
      var treeNav;       // GvaScript.TreeNavigator associated with the menu
      var treeNav_rules; // keymap rules of that object
      var textboxKeymap; // keymap associated with the input textbox
      var menuVisible = false;

      function showMenu(event) {
         if (menuVisible) return;
         menuVisible = true;
         
         // make the menu visible under the textbox
         var textbox = $('textbox');
         var coords = textbox.cumulativeOffset();
         var dim = Element.getDimensions(textbox);
         with ($('menu').style) {
           display = 'block';
           left    = coords[0] + 'px';
           top     = coords[1] + dim.height + 'px';
         };
         if (!treeNav) { // if first time here, instantiate GvaScript.TreeNavigator
           treeNav = new GvaScript.TreeNavigator('menu', {
             treeTabIndex  : -1,
             tabIndex      : -1,           // no tabbing 
             createButtons : false,        // no +/- buttons
             keymap        : textboxKeymap // reuse keymap from textbox
            });
         }
         else            // else reuse rules popped from last hideMenu()
           textboxKeymap.rules.push(treeNav_rules);  
         textbox.style.backgroundImage = "url(special_icons/navopen.gif)";

         if (event) Event.stop(event);
      }

      function hideMenu(event) {
        if (!menuVisible) return;
        menuVisible = false;

        $('menu').style.display = "none";
        treeNav_rules = textboxKeymap.rules.pop();
        $('textbox').style.backgroundImage = "url(special_icons/navclose.gif)";

        if (event) Event.stop(event);
      }

      function selectEntry(event) {
        var node = Event.element(event);
        if (treeNav.isLeaf(node)) {
          $('textbox').value = node.getAttribute("value");
          hideMenu();
        }
        else {
          var method = treeNav.isClosed(node) ? treeNav.open : treeNav.close;
          method.call(treeNav, node);
        }
      }

      function maybeToggleMenu(event) { // when clicking on the textbox
        // only handle clicks in the area right 20px of the textbox
        var x = event.offsetX || event.layerX; // MSIE || FIREFOX
        if (x > Element.getDimensions('textbox').width - 20) {
          var handler = menuVisible ? hideMenu : showMenu;
          handler(event);
        }
      }

      function maybeBackFocus(event) { // when leaving the textbox
        // if leaving the textbox because of a click in menu, we must
        // bring back focus to the textbox
        var x = Event.pointerX(event);
        var y = Event.pointerY(event);
        if (Position.within($('menu'), x, y))
          $('textbox').focus();
        else 
          hideMenu();
      }

      function setup() {  
         var textbox = $('textbox');

         // bind event handlers to the textbox
         textboxKeymap = new GvaScript.KeyMap({DOWN:showMenu,
                                            ESCAPE: hideMenu});
         textboxKeymap.observe('keydown', textbox,  {preventDefault:false,
                                              stopPropagation:false});
         Event.observe(textbox, "click", maybeToggleMenu);
         Event.observe(textbox, "blur",  maybeBackFocus);
        
         with (textbox.style) {
          backgroundImage    = "url(special_icons/navclose.gif)";
          backgroundRepeat   = "no-repeat";
          backgroundPosition = "center right";
        }

        textbox.focus();
      }

      document.observe('dom:loaded', setup);
    </script>


  </head>

  <body>

    <h1>Tree Navigator as a dropdown menu</h1>

    Press the DOWN arrow or click on the triangle: <input id='textbox'>

    <div id='menu' onPing="selectEntry" >
      <div class="TN_leaf" value="value1" >
        <div class="TN_label">entry 1</div> 
      </div>
      <div class="TN_leaf" value="value2">
        <div class="TN_label">very <big><b>big</b></big> entry 2</div> 
      </div>
      <div class="TN_leaf" value="value3">
        <div class="TN_label">an <em>emphasized</em> entry 3</div> 
      </div>
      <div class="TN_node TN_closed">
        <div class="TN_label">entry 4: a submenu</div> 
        <div class="TN_content">
          <div class="TN_leaf" value="subvalue4.1">
            <div class="TN_label">subentry 4.1</div> 
          </div>
          <div class="TN_node TN_closed">
            <div class="TN_label">subsubmenu</div> 
            <div class="TN_content">
              <div class="TN_leaf" value="subvalue4.2.1">
                <div class="TN_label">subentry 4.2.11</div> 
              </div>
              <div class="TN_leaf" value="subvalue4.2.2">
                <div class="TN_label">subentry 4.2.2</div> 
              </div>

            </div>
          </div>

          <div class="TN_leaf" value="subvalue4.3">
            <div class="TN_label">subentry 4.3</div> 
          </div>
        </div>
      </div>

    </div>
  </body>
</html>
